<template>
    <div class="newsong">
        <div class="new-item" v-for="(item,index) in newsonglist" 
        :key="item.id"
        :data-imgmid="item.imgmid"
        :data-songmid="item.songmid"
        :data-songname="item.songname"
        :data-singer="item.singer"
        :data-index="index"
        @click="addPlay"
        :class="index===cur_animate?'animate-addSong':''"
        >
            <img :src="imgUrl1+item.imgmid+imgUrl2" alt="">
            <p class="songname" :title="item.songname">{{item.songname}}</p>
            <p class="singer">{{item.singer}}</p>
        </div>
    </div>
</template>

<script>
import {mapState, mapGetters} from "vuex"
export default {
    data(){
        return{
            cur_animate:-1,
            newsongsData:{},    //新歌数据
            newsonglist:[],     //歌曲列表   
            imgUrl1:'https://y.gtimg.cn/music/photo_new/T002R90x90M000',
            imgUrl2:'.jpg?max_age=2592000',
        }
    },
    created(){
        // 新歌数据请求
        this.$axios.get("/apis/v8/fcg-bin/fcg_v8_toplist_cp.fcg?tpl=3&page=detail&date=2018-06-26&topid=27&type=top&song_begin=0&song_num=90&g_tk=2079212647&jsonpCallback=MusicJsonCallbacktoplist&loginUin=79952008&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0")
        .then(response=>{
            let str=response.data;
            this.newsongsData=JSON.parse(str.substring(str.indexOf('(')+1,str.length-1)); 
            for(let item_song of this.newsongsData.songlist){
                let singer='';
                let song={
                    id:'',
                    songname:'',
                    songmid:'',
                    imgmid:'',
                    singer:'',
                };
                song.id=item_song.cur_count;
                song.songname=item_song.data.songname;
                song.songmid=item_song.data.songmid;
                song.imgmid=item_song.data.albummid;
                for(let item_singer of item_song.data.singer){
                    if(singer===''){
                        singer+=item_singer.name;
                    }else{
                        singer=singer+'/'+item_singer.name;
                    }
                }
                song.singer=singer;
                this.newsonglist.push(song);
            }
        }).catch(error=>{
            
            alert('服务器正忙，音乐资源加载失败，请刷新界面重新加载')
        })
    },
    components:{

    },
    methods:{
        addPlay(e){
            this.cur_animate=parseInt(e.currentTarget.dataset.index);
            let playSong={
                songname:e.currentTarget.dataset.songname,
                singer:e.currentTarget.dataset.singer,
                imgmid:e.currentTarget.dataset.imgmid,
                songmid:e.currentTarget.dataset.songmid
            }
            this.$store.commit('setPlaySong',playSong);
            if(this.listTotal===0){
                this.playList.unshift(playSong);
                this.$store.commit('setCurPlayIndex',0);
                this.$store.commit('setPlayList',this.playList);
            }else{
                for(let key in this.playList){
                    if(this.playList[key].songmid===playSong.songmid){
                        this.$store.commit('setCurPlayIndex',parseInt(key));
                        return;
                    }                  
                }
                this.playList.unshift(playSong);
                this.$store.commit('setPlayList',this.playList);
                this.$store.commit('setCurPlayIndex',0);
            }
            if(this.paused===true){
                this.$store.commit('setPaused');
            }
        },
        pagechange(somedata){
            this.curPage=somedata;
            this.cur_animate=-1;
        },
        addAnimate(index){
            this.cur_animate=index;
        }
    },
    computed:{
        ...mapState([
            'playSong',
            'playList',
            'curPlayIndex',
            'paused'
        ]),
        ...mapGetters([
            'listTotal',
        ]),
        
    },
  
}
</script>

<style scoped>
.newsong{
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
    justify-content: space-around;
}
.new-item{
    flex: 1;
    max-width: 90px;
    margin:10px 10px;
    padding: 10px 0;
    cursor: pointer;
}
.songname{
    max-width: 90px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.singer{
    max-width: 90px;
    text-align: center;
    color: #999;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.animate-addSong{
    animation: addSong 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes addSong {
    0%{transform: scale(1,1);transform: translateY(0);opacity: 1;}
    100%{transform:scale(0.2,0.2);transform: translateY(50px);opacity: 0;}
}

</style>
